<template>
  <div
    class="masonry-item text-[#222]"
    @click="viewProduct(product)"
    :style="{ width: width + 'px' }">
    <div
      class="product-image relative"
      :style="{
        height: (width / product.thumbnail.width) * product.thumbnail.height + 'px',
      }">
      <img
        :src="product.thumbnail?.url"
        :alt="product.name"
        loading="lazy"
        :class="{ loaded: !isLoading }"
        @load="handleImageLoad"
        ref="productImage" />
      <!-- 商品图表 -->
      <div
        class="svg_wrapper"
        v-if="product.enable_nex == 0 && [1, 2, 3, 4].includes(product.nex_status as any)">
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="
            product.nex_status == 1
              ? 'In Nex'
              : product.nex_status == 2 || product.nex_status == 4
              ? 'Success'
              : product.nex_status == 3
              ? 'Purchasable'
              : ''
          "
          placement="top">
          <svg
            v-if="product.nex_status == 1"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none">
            <path
              d="M18.4795 9.26062C17.8988 7.71887 17.0521 6.29096 15.9778 5.04187C14.1187 2.88984 11.6742 1.5 9.75 1.5C9.63558 1.50009 9.5227 1.52635 9.42 1.57678C9.3173 1.6272 9.22749 1.70046 9.15746 1.79094C9.08743 1.88142 9.03903 1.98673 9.01596 2.09879C8.99289 2.21086 8.99577 2.32672 9.02437 2.4375C9.67453 4.92188 8.32688 6.98766 6.90047 9.17438C5.71875 10.9856 4.5 12.8564 4.5 15C4.5 19.1353 7.86469 22.5 12 22.5C16.1353 22.5 19.5 19.1353 19.5 15C19.5 12.9703 19.1569 11.0395 18.4795 9.26062ZM13.5155 19.6261C13.0312 20.1417 12.4242 20.25 12 20.25C11.5758 20.25 10.9688 20.1417 10.4845 19.6261C10.0003 19.1105 9.75 18.2925 9.75 17.25C9.75 16.0716 10.1634 15.1744 10.5628 14.3072C10.7948 13.8038 11.0316 13.2914 11.1722 12.743C11.1871 12.6833 11.2165 12.6282 11.2577 12.5826C11.2989 12.537 11.3508 12.5022 11.4086 12.4813C11.4664 12.4604 11.5285 12.4541 11.5894 12.4628C11.6503 12.4716 11.7081 12.4952 11.7577 12.5316C12.1864 12.8633 12.5676 13.2522 12.8906 13.6875C13.7423 14.8125 14.25 16.1447 14.25 17.25C14.25 18.2925 13.9959 19.1142 13.5155 19.6261Z"
              fill="#F76B1B" />
          </svg>
          <svg
            v-else-if="product.nex_status == 2 || product.nex_status == 4"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none">
            <path
              d="M12.6089 15.7317C12.4111 15.7464 12.2114 15.7537 12.0098 15.7537C11.7647 15.7537 11.5223 15.7425 11.2828 15.7214C10.0978 15.6164 8.94956 15.2565 7.91663 14.6663C6.88371 14.0762 5.99053 13.2698 5.29826 12.3023C5.28003 12.2763 5.25549 12.2554 5.22694 12.2415C5.19839 12.2275 5.16677 12.2211 5.13505 12.2227C5.10333 12.2244 5.07254 12.234 5.04558 12.2508C5.01862 12.2676 4.99637 12.291 4.98092 12.3187L1.60592 18.3844C1.47748 18.6188 1.45733 18.9 1.59279 19.1287C1.66331 19.2422 1.76155 19.3358 1.87825 19.4007C1.99495 19.4657 2.12627 19.4998 2.25983 19.5H5.91608C6.04344 19.4953 6.16975 19.5247 6.28198 19.585C6.39421 19.6454 6.48829 19.7347 6.55451 19.8436L8.3667 22.875C8.43301 22.9875 8.52711 23.081 8.63998 23.1467C8.75284 23.2124 8.88067 23.2479 9.01123 23.25C9.28967 23.2345 9.57795 23.0536 9.69373 22.8L12.7926 15.9961C12.806 15.9665 12.8115 15.934 12.8085 15.9017C12.8056 15.8694 12.7943 15.8384 12.7758 15.8118C12.7573 15.7851 12.7322 15.7637 12.7029 15.7497C12.6736 15.7357 12.6413 15.7295 12.6089 15.7317Z"
              fill="#1DD129" />
            <path
              d="M22.3889 18.3694L19.0359 12.3145C19.0204 12.2871 18.9983 12.2639 18.9715 12.2473C18.9447 12.2307 18.9141 12.2211 18.8826 12.2194C18.8511 12.2177 18.8197 12.224 18.7912 12.2377C18.7628 12.2513 18.7383 12.272 18.72 12.2977C17.7979 13.5896 16.5236 14.589 15.0492 15.1767C14.8682 15.2481 14.7217 15.3866 14.6405 15.5634L12.9126 19.365C12.8904 19.4135 12.8789 19.4663 12.8789 19.5197C12.8789 19.5731 12.8904 19.6258 12.9126 19.6744L14.3315 22.7958C14.4464 23.0494 14.7342 23.2345 15.0122 23.25C15.1428 23.2468 15.2705 23.2101 15.3829 23.1435C15.4953 23.0768 15.5888 22.9824 15.6544 22.8694L17.4605 19.8422C17.5959 19.6148 17.8415 19.4986 18.1064 19.5H21.7987C22.1114 19.5 22.3481 19.3369 22.455 19.0312C22.4925 18.9227 22.5061 18.8073 22.4947 18.693C22.4833 18.5788 22.4472 18.4683 22.3889 18.3694Z"
              fill="#1DD129" />
            <path
              d="M12.0117 9.75C13.2546 9.75 14.2622 8.74264 14.2622 7.5C14.2622 6.25736 13.2546 5.25 12.0117 5.25C10.7688 5.25 9.76123 6.25736 9.76123 7.5C9.76123 8.74264 10.7688 9.75 12.0117 9.75Z"
              fill="#1DD129" />
            <path
              d="M12.0117 0.75C8.28889 0.75 5.2617 3.77766 5.2617 7.5C5.2617 11.2223 8.29029 14.25 12.0117 14.25C15.7331 14.25 18.7617 11.2219 18.7617 7.5C18.7617 3.77812 15.734 0.75 12.0117 0.75ZM12.0117 11.25C11.27 11.25 10.545 11.0301 9.92831 10.618C9.31163 10.206 8.83098 9.62029 8.54715 8.93506C8.26332 8.24984 8.18906 7.49584 8.33376 6.76841C8.47845 6.04098 8.8356 5.3728 9.36005 4.84835C9.8845 4.3239 10.5527 3.96675 11.2801 3.82206C12.0075 3.67736 12.7615 3.75162 13.4468 4.03545C14.132 4.31928 14.7177 4.79993 15.1297 5.41661C15.5418 6.0333 15.7617 6.75832 15.7617 7.5C15.7605 8.49418 15.365 9.44729 14.662 10.1503C13.959 10.8533 13.0059 11.2488 12.0117 11.25Z"
              fill="#1DD129" />
          </svg>
          <svg
            v-else-if="product.nex_status == 3"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none">
            <path
              d="M20.5954 8.13393C20.4671 8.00057 20.3144 7.89482 20.1462 7.82278C19.9779 7.75075 19.7975 7.71387 19.6154 7.71429H16.8461V7C16.8461 5.67392 16.3356 4.40215 15.4267 3.46447C14.5179 2.52678 13.2853 2 12 2C10.7147 2 9.48208 2.52678 8.57325 3.46447C7.66442 4.40215 7.15384 5.67392 7.15384 7V7.71429H4.38461C4.01739 7.71429 3.66521 7.8648 3.40554 8.13271C3.14588 8.40061 3 8.76398 3 9.14286V18.7857C3 20.5268 4.42788 22 6.11538 22H17.8846C18.7009 22.0003 19.4848 21.671 20.0688 21.0826C20.3627 20.7933 20.5968 20.4456 20.7568 20.0604C20.9168 19.6752 20.9996 19.2606 21 18.8415V9.14286C21.0006 8.95544 20.9651 8.76977 20.8956 8.59659C20.8262 8.42341 20.7242 8.26615 20.5954 8.13393ZM8.53846 7C8.53846 6.0528 8.90316 5.14439 9.55232 4.47462C10.2015 3.80485 11.0819 3.42857 12 3.42857C12.9181 3.42857 13.7985 3.80485 14.4477 4.47462C15.0968 5.14439 15.4615 6.0528 15.4615 7V7.71429H8.53846V7ZM16.8461 11.2857C16.8461 12.6118 16.3356 13.8836 15.4267 14.8212C14.5179 15.7589 13.2853 16.2857 12 16.2857C10.7147 16.2857 9.48208 15.7589 8.57325 14.8212C7.66442 13.8836 7.15384 12.6118 7.15384 11.2857V10.5714C7.15384 10.382 7.22678 10.2003 7.35662 10.0664C7.48645 9.9324 7.66254 9.85714 7.84615 9.85714C8.02976 9.85714 8.20585 9.9324 8.33569 10.0664C8.46552 10.2003 8.53846 10.382 8.53846 10.5714V11.2857C8.53846 12.2329 8.90316 13.1413 9.55232 13.8111C10.2015 14.4809 11.0819 14.8571 12 14.8571C12.9181 14.8571 13.7985 14.4809 14.4477 13.8111C15.0968 13.1413 15.4615 12.2329 15.4615 11.2857V10.5714C15.4615 10.382 15.5345 10.2003 15.6643 10.0664C15.7941 9.9324 15.9702 9.85714 16.1538 9.85714C16.3375 9.85714 16.5135 9.9324 16.6434 10.0664C16.7732 10.2003 16.8461 10.382 16.8461 10.5714V11.2857Z"
              fill="#222222" />
          </svg>
        </el-tooltip>
      </div>
      <!-- 加载占位符 -->
      <div v-if="isLoading" class="loading-placeholder"></div>
    </div>
    <div class="product-info">
      <h3 class="product-name">{{ product.title }}</h3>
      <div class="product-description">
        <div
          class="overflow-hidden text-ellipsis whitespace-nowrap leading-[1.2]"
          :class="{ 'max-w-[60%]': product.tags.length > 0 }">
          {{ product.caption }}
        </div>
        <div class="tag_list_view" v-if="product.tags.length > 0">
          <span
            v-slide-underline
            class="line max-w-[100%] text-[#222] ml-2 overflow-hidden text-ellipsis whitespace-nowrap"
            v-for="tag in product.tags"
            :key="tag.id"
            @click.stop="handleTagClick(tag)">
            # {{ tag.name }}
          </span>
        </div>
      </div>
      <div class="mt-[12px] flex justify-between text-[14px]">
        <div
          class="left-meta flex items-center cursor-pointer"
          @click.stop="viewUser(product.user)">
          <img
            :src="product?.user?.avatar"
            class="w-[24px] h-[24px] rounded-full"
            :alt="product.user?.name" />
          <div
            class="text-[#222] ml-[4px] max-w-[100px] overflow-hidden text-ellipsis whitespace-nowrap"
            style="
              max-width: 100px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            ">
            {{ product.user?.name }}
          </div>
        </div>
        <div class="right-meta flex items-center">
          <div class="flex items-center gap-[4px]">
            <svg
              v-like-pulse
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              :fill="isLiked(product) ? '#FF4D4F' : 'none'"
              @click.stop="handleLike(product)"
              :style="likingIds.has(product.id) ? 'pointer-events:none;opacity:0.6' : ''">
              <path
                d="M12.0005 21C11.6994 20.9996 11.4054 20.9086 11.1568 20.7389C7.47286 18.2381 5.87771 16.5234 4.99786 15.4514C3.12286 13.1663 2.22521 10.8202 2.25052 8.27953C2.28005 5.36813 4.61583 3 7.4574 3C9.52365 3 10.9547 4.16391 11.7882 5.13328C11.8146 5.16368 11.8472 5.18805 11.8838 5.20476C11.9205 5.22146 11.9603 5.23011 12.0005 5.23011C12.0408 5.23011 12.0806 5.22146 12.1172 5.20476C12.1538 5.18805 12.1865 5.16368 12.2129 5.13328C13.0463 4.16297 14.4774 3 16.5436 3C19.3852 3 21.721 5.36812 21.7505 8.28C21.7758 10.8211 20.8772 13.1672 19.0032 15.4519C18.1233 16.5239 16.5282 18.2386 12.8443 20.7394C12.5955 20.9089 12.3016 20.9998 12.0005 21Z"
                :fill="isLiked(product) ? '#FF4D4F' : '#CBCBCB'" />
            </svg>
            <span class="font-[500]">{{ formatNumber(product.counter?.like_count) }}</span>
          </div>
          <div class="flex items-center gap-[4px] ml-[12px]">
            <svg
              v-svg-hover
              class="base_svg_color"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              fill="currentColor"
              viewBox="0 0 24 24">
              <path
                d="M17.7054 5.0025C16.084 3.70526 14.0692 2.99898 11.9928 3C9.54512 3 7.25896 3.94299 5.54977 5.6554C3.89803 7.31237 2.99281 9.50009 3.00004 11.814C3.0001 13.5104 3.49814 15.1696 4.43241 16.5856L4.44004 16.5964C4.45129 16.6129 4.46294 16.6294 4.47459 16.6454C4.48624 16.6615 4.50071 16.6824 4.50392 16.6876L4.51276 16.7037C4.55816 16.7841 4.59312 16.8821 4.56218 16.9809L3.82209 19.6592C3.79249 19.7588 3.77627 19.8619 3.77388 19.9658C3.77335 20.2391 3.8812 20.5014 4.07378 20.6953C4.26637 20.8891 4.52798 20.9987 4.80124 21C4.94564 20.9952 5.08795 20.964 5.22111 20.908L7.93275 19.9292L7.96691 19.916C8.04067 19.885 8.11994 19.8693 8.19994 19.8698C8.2737 19.87 8.34682 19.8836 8.4157 19.91C8.48079 19.9353 9.07181 20.1615 9.69538 20.3358C10.2137 20.4805 11.2921 20.6975 12.137 20.6975C14.5337 20.6975 16.7716 19.7693 18.4382 18.0834C20.0904 16.4104 21 14.1865 21 11.8188C21.0002 11.211 20.9358 10.6049 20.8079 10.0108C20.3925 8.05728 19.2908 6.27817 17.7054 5.0025ZM8.14289 13.2857C7.8886 13.2857 7.64002 13.2103 7.42859 13.069C7.21715 12.9278 7.05236 12.727 6.95505 12.492C6.85773 12.2571 6.83227 11.9986 6.88188 11.7492C6.93149 11.4998 7.05394 11.2707 7.23375 11.0909C7.41356 10.9111 7.64265 10.7886 7.89206 10.739C8.14146 10.6894 8.39997 10.7148 8.63491 10.8122C8.86984 10.9095 9.07064 11.0743 9.21192 11.2857C9.35319 11.4971 9.4286 11.7457 9.4286 12C9.4286 12.341 9.29314 12.668 9.05202 12.9091C8.8109 13.1503 8.48388 13.2857 8.14289 13.2857ZM12 13.2857C11.7457 13.2857 11.4972 13.2103 11.2857 13.069C11.0743 12.9278 10.9095 12.727 10.8122 12.492C10.7149 12.2571 10.6894 11.9986 10.739 11.7492C10.7886 11.4998 10.9111 11.2707 11.0909 11.0909C11.2707 10.9111 11.4998 10.7886 11.7492 10.739C11.9986 10.6894 12.2571 10.7148 12.492 10.8122C12.727 10.9095 12.9278 11.0743 13.0691 11.2857C13.2103 11.4971 13.2857 11.7457 13.2857 12C13.2857 12.341 13.1503 12.668 12.9092 12.9091C12.668 13.1503 12.341 13.2857 12 13.2857ZM15.8572 13.2857C15.6029 13.2857 15.3543 13.2103 15.1429 13.069C14.9314 12.9278 14.7666 12.727 14.6693 12.492C14.572 12.2571 14.5465 11.9986 14.5961 11.7492C14.6458 11.4998 14.7682 11.2707 14.948 11.0909C15.1278 10.9111 15.3569 10.7886 15.6063 10.739C15.8557 10.6894 16.1142 10.7148 16.3492 10.8122C16.5841 10.9095 16.7849 11.0743 16.9262 11.2857C17.0675 11.4971 17.1429 11.7457 17.1429 12C17.1429 12.341 17.0074 12.668 16.7663 12.9091C16.5252 13.1503 16.1981 13.2857 15.8572 13.2857Z" />
            </svg>
            <span class="font-[500]">
              {{ formatNumber(product.counter?.comment_count) }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { CommentAPI } from '@/api/comment';
  import { FeedItem } from '@/api/feeds';
  import { useLoginModal } from '@/composables/useLoginModal';
  import { useUserStore } from '@/store/user';
  import { FeedVO } from '@/types/activity';
  import { computed, ref } from 'vue';
  import { useRouter } from 'vue-router';

  interface Props {
    product: FeedVO;
    width: number;
  }

  withDefaults(defineProps<Props>(), {
    product: () => ({} as FeedVO),
  });

  const router = useRouter();
  const userStore = useUserStore();
  const isLoggedIn = computed(() => userStore.isAuthenticated);
  const userInfo = computed(() => userStore.user);

  // 点赞/取消点赞逻辑
  const likingIds = ref<Set<number>>(new Set());

  const isLiked = (product: FeedItem) => {
    return product.like_flag === 1;
  };

  const handleLike = async (product: FeedItem) => {
    const id: any = product.feed_id;
    if (likingIds.value.has(id)) return;

    likingIds.value.add(id);
    try {
      if (!isLiked(product)) {
        // 点赞
        await CommentAPI.isLike({ feed_id: id, liked_uid: product.uid });
        // 乐观更新状态
        product.like_flag = 1;
        if (product.counter && typeof product.counter.like_count === 'number') {
          product.counter.like_count += 1;
        }
      } else {
        // 取消点赞
        await CommentAPI.unLike({ feed_id: id, liked_uid: product.uid });
        // 乐观更新状态
        product.like_flag = 0;
        if (
          product.counter &&
          typeof product.counter.like_count === 'number' &&
          product.counter.like_count > 0
        ) {
          product.counter.like_count -= 1;
        }
      }
    } catch (error) {
      console.error('点赞操作失败:', error);
      // 发生错误时恢复原状态
      product.like_flag = isLiked(product) ? 0 : 1;
    } finally {
      likingIds.value.delete(id);
    }
  };

  // 方法
  const viewProduct = (product: FeedItem) => {
    router.push({ path: '/detail', query: { feed_id: product?.feed_id } });
  };

  // 处理标签点击事件
  const handleTagClick = (tag: any) => {
    // 当tag_type=1时，跳转到活动详情页
    if (tag.tag_type === 1) {
      router.push({ path: '/contest/detail', query: { aid: tag.target_id } });
    } else {
      // 其他类型标签的处理逻辑（如有需要）
      console.log('点击了其他类型的标签:', tag);
    }
  };

  const formatNumber = (num: number) => {
    if (!num) return '0';
    if (num >= 1000) {
      return (num / 1000).toFixed(1) + 'k';
    }
    return num.toString();
  };

  // 查看用户
  const viewUser = (user: any) => {
    router.push({ path: '/profile', query: { uid: user?.uid } });
  };

  // 新增：图片加载状态
  const isLoading = ref(true);
  const productImage = ref<HTMLImageElement>();

  // 新增：处理图片加载完成事件
  const handleImageLoad = () => {
    isLoading.value = false;
  };
</script>

<style scoped lang="scss">
  .masonry-item {
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    position: relative;

    // 加载状态样式
    &.loading {
      opacity: 0.7;
      background: #f5f5f5;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 24px;
        height: 24px;
        border: 2px solid #e0e0e0;
        border-top: 2px solid #f76b1b;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        z-index: 1;
      }
    }

    .product-card {
      overflow: hidden;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .product-image {
      width: 100%;
      overflow: hidden;
      border-radius: 8px;
      background: #f5f5f5;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        transition: all 0.3s ease;
        &:hover {
          transform: scale(1.1);
        }
      }

      // 加载占位符样式
      .loading-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
      }
    }

    .product-info {
      padding-top: 12px;
    }

    .product-name {
      color: #222;

      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .product-description {
      color: #7a7a7a;

      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      margin-top: 4px;
      display: flex;
      align-items: center;
    }
  }

  // 新增：加载动画关键帧
  @keyframes loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .svg_wrapper {
    border-radius: 30px 6px 0 30px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);
    display: inline-flex;
    padding: 8px 12px;
    align-items: center;
    gap: 16px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
  }
</style>
